<cnsl-filter (resetted)="resetFilter()" (trigger)="emitFilter()" [queryCount]="searchQueries.length">
  <div class="filter-row" id="filtercomp">
    <div class="email-query">
      <mat-checkbox
        id="name"
        class="cb"
        [checked]="getSubFilter(SubQuery.NAME)"
        (change)="changeCheckbox(SubQuery.NAME, $event)"
        >{{ 'FILTER.ORGNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.NAME) as eq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="eq.getMethod()" (selectionChange)="setMethod(eq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
          <input cnslInput name="value" [value]="eq.getName()" (change)="setValue(SubQuery.NAME, eq, $event)" />
        </cnsl-form-field>
      </div>
    </div>

    <div class="name-query">
      <mat-checkbox
        id="state"
        class="cb"
        [checked]="getSubFilter(SubQuery.STATE)"
        (change)="changeCheckbox(SubQuery.STATE, $event)"
        >{{ 'FILTER.STATE' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.STATE) as sq">
        <span class="nomethod cnsl-secondary-text">
          {{ 'FILTER.METHODS.1' | translate }}
        </span>

        <cnsl-form-field class="filter-select-value">
          <mat-select [value]="sq.getState()" (selectionChange)="setValue(SubQuery.STATE, sq, $event)">
            <mat-option *ngFor="let state of states" [value]="state">
              {{ 'USER.STATE.' + state | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>
      </div>
    </div>
  </div>

  <div class="domain-query">
    <mat-checkbox
      id="domain"
      class="cb"
      [checked]="getSubFilter(SubQuery.DOMAIN)"
      (change)="changeCheckbox(SubQuery.DOMAIN, $event)"
      >{{ 'FILTER.PRIMARYDOMAIN' | translate }}
    </mat-checkbox>
    <div class="subquery" *ngIf="getSubFilter(SubQuery.DOMAIN) as dq">
      <cnsl-form-field class="filter-select-method">
        <mat-select [value]="dq.getMethod()" (selectionChange)="setMethod(dq, $event)">
          <mat-option *ngFor="let method of methods" [value]="method">
            {{ 'FILTER.METHODS.' + method | translate }}
          </mat-option>
        </mat-select>
      </cnsl-form-field>

      <cnsl-form-field class="filter-input-value">
        <input cnslInput name="value" [value]="dq.getDomain()" (change)="setValue(SubQuery.DOMAIN, dq, $event)" />
      </cnsl-form-field>
    </div>
  </div>

  <div class="id-query">
    <mat-checkbox id="id" class="cb" [checked]="getSubFilter(SubQuery.ID)" (change)="changeCheckbox(SubQuery.ID, $event)"
      >{{ 'FILTER.ORGID' | translate }}
    </mat-checkbox>
    <div class="subquery" *ngIf="getSubFilter(SubQuery.ID) as idq">
      <span class="nomethod cnsl-secondary-text">
        {{ 'FILTER.METHODS.1' | translate }}
      </span>

      <cnsl-form-field class="filter-input-value">
        <input cnslInput name="value" [value]="idq.getId()" (change)="setValue(SubQuery.ID, idq, $event)" />
      </cnsl-form-field>
    </div>
  </div>
</cnsl-filter>
